import React, { useState } from 'react'
// 是用来解析 MD 语法用的
import MarkdownIt from 'markdown-it'
// 用来编辑 MD 的组件
import MdEditor from 'react-markdown-editor-lite'

import 'react-markdown-editor-lite/lib/index.css'
import { Button } from 'antd'

const Md = () => {

  // 创建解析器
  const mdParser = new MarkdownIt()

  const [htmlStr,setHtmlStr] = useState()

  function change({text, html}){
    console.log(text, html);
    setHtmlStr(html)
  }
  return (
    <div>
      <h1>Md 编辑器 <Button onClick={()=>{
        console.log(htmlStr);
      }}>点击获取</Button> </h1>
      <MdEditor renderHTML={text => mdParser.render(text)} onChange={change} />

      <div dangerouslySetInnerHTML={{__html: htmlStr}}></div>

    </div>
  )
}

export default Md